import { FormRule, Space, TableProps } from 'tdesign-vue-next';

import { SearchBarItem } from '@/components/common-search-bar/index.vue';
import { t } from '@/locales';
import { tableActionBtn, tableSwitch } from '@/utils/action';

export interface PageFormDataType {
  id: number;
  title: string;
  description: string;
  content: Recordable;
  category?: Recordable;
}

export const PageFormData: PageFormDataType = {
  id: 0,
  title: '',
  description: '',
  content: {},
};

export const SEARCH_BAR_DATA: SearchBarItem[] = [
  { component: 'input-number', label: 'ID', name: 'id' },
  { label: 'common.title', name: 'title' },
];

export const ARTICLE_COLUMNS: TableProps['columns'] = [
  { title: 'ID', colKey: 'id', width: 80 },
  { title: () => t('common.title'), colKey: 'title', width: 500, ellipsis: true },
  { title: () => t('pages.content.read'), colKey: 'readNum' },
  { title: () => t('pages.content.like'), colKey: 'likeNum' },
  { title: () => t('common.createAt'), colKey: 'updatedAt', width: 180 },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:document:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    width: 150,
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['content:document:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['content:document:delete'] });

      return h(Space, () => {
        return [actionEdit, actionDelete];
      });
    },
  },
];

/**
 * article form
 */
export interface ArticleFormType {
  id?: number;
  title: string;
  description: string;
  cover: Recordable;
  content: Recordable;
  tags: any[];
  seoTitle: string;
  seoKeywords: string;
  seoDescription: string;
  readNum: number;
  likeNum: number;
}

export const ARTICLE_FORM_DATA: ArticleFormType = {
  id: 0,
  title: '',
  description: '',
  cover: {},
  content: {
    content: '',
  },
  tags: [],
  seoTitle: '',
  seoKeywords: '',
  seoDescription: '',
  readNum: 999,
  likeNum: 999,
};

export const ARTICLE_FORM_RULES: Record<string, FormRule[]> = {
  title: [{ required: true }],
  'content.content': [{ required: true }],
};

/**
 * lik form
 */
export interface LinkFormType {
  id?: number;
  title: string;
  cover: Recordable;
  link: {
    url: string;
    follow: number;
    target: number;
  };
}

export const LINK_FOLLOW = [
  { label: t('common.no'), value: 0 },
  { label: t('common.yes'), value: 1 },
];

export const LINK_TARGET = [
  { label: t('pages.content.page'), value: 0 },
  { label: t('pages.content.window'), value: 1 },
  { label: t('pages.content.parentPage'), value: 2 },
  { label: t('pages.content.topPage'), value: 3 },
];

export const LINK_COLUMNS: TableProps['columns'] = [
  { title: 'ID', colKey: 'id', width: 80 },
  { title: () => t('pages.content.title'), colKey: 'title', width: 200, ellipsis: true },
  { title: () => t('pages.content.link'), colKey: 'link.url', ellipsis: true },
  {
    title: () => t('common.title'),
    colKey: 'link.follow',
    cell(h, { row }) {
      if (row.link) {
        return LINK_FOLLOW[row.link.follow].label;
      }
      return '';
    },
  },
  {
    title: () => t('pages.content.openMethod'),
    colKey: 'link.target',
    cell(h, { row }) {
      if (row.link) {
        return LINK_TARGET[row.link.target].label;
      }
      return '';
    },
  },
  { title: () => t('common.createAt'), colKey: 'updatedAt', width: 180 },
  {
    title: () => t('common.display'),
    colKey: 'display',
    width: 150,
    cell(h, { row }) {
      const ele = tableSwitch(h, row, ['content:document:display']);
      return row.display !== undefined ? ele : '';
    },
  },
  {
    colKey: 'action',
    title: () => t('common.operation'),
    width: 150,
    cell(h, { row }) {
      const actionEdit = tableActionBtn({ h, type: 'edit', row, auths: ['content:document:detail'] });
      const actionDelete = tableActionBtn({ h, type: 'delete', row, auths: ['content:document:delete'] });

      return h(Space, () => {
        return [actionEdit, actionDelete];
      });
    },
  },
];

export const LINK_FORM_DATA: LinkFormType = {
  id: 0,
  title: '',
  cover: {},
  link: {
    url: '',
    follow: 0,
    target: 1,
  },
};

export const LINK_FORM_RULES: Record<string, FormRule[]> = {
  title: [{ required: true, trigger: 'blur' }],
  'link.url': [
    { required: true, trigger: 'blur' },
    { pattern: /^(http|https):\/\/([\w.]+\/?)\S*$/, message: t('common.formatError'), trigger: 'blur' },
  ],
};
